<template>
	<view class="every">
		<view class="box" @click="toDetail(teacher.id)">
			<image :src="teacher.avatar" mode="aspectFill"></image>
			<text>讲师姓名：{{teacher.name}}</text>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		teacher:{}
	})
	const toDetail = (id) => {
		uni.navigateTo({
			url: '/pages/teacher/teacherDetail?id=' + id
		})
	}
</script>

<style lang="scss">
	.every {
		height: 100%;

		.box {
			height: 100%;
			position: relative;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 11px 10px 20px 4px rgba(0,0,0,0.4);
			image {
				width: 100%;
				height: 100%;
			}

			text {
				display: inline-block;
				position: absolute;
				bottom: 30rpx;
				left: 0rpx;
				width: 100%;
				height: 50rpx;
				text-align: center;
				font-weight: 600;
				font-size: 25rpx;
				color: #eee;
				text-shadow:5px 3px 7px #000000;
			}
		}
	}
</style>